import { defineConfig, loadEnv } from 'vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { fileURLToPath, URL } from 'node:url'
import viteCompression from 'vite-plugin-compression'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    base: env.VITE_APP_BASE_URL,
    server: {
      // server 启动端口号
      port: 8000,
      open: false,
      // 自定义代理配置
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:5656/api',
          changeOrigin: true,
          ws: false,
          rewrite: (path: string) => path.replace(/^\/api/, '')
        }
      }
    },
    plugins: [
      vue(),
      vueJsx(),
      VueSetupExtend(),
      // elementui 自动引入
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: false })]
      }),
      Components({
        dirs: ['src/components/gloabComponents/*'],
        extensions: ['vue'],
        deep: false,
        resolvers: [ElementPlusResolver({ importStyle: false })]
      }),
      // 开启gzip压缩，部署后服务端也需要支持gzip
      viteCompression(
        {
          algorithm: 'gzip',
          filter: /.js$|.css$|.html$/,
          threshold: 1024 * 1024, // 文件大于1M的时候进行压缩
          verbose: false,
          deleteOriginFile: false // 是否删除原文件
        }
      )
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/styles/variables.scss";'
        }
      }
    }
    // build: {
    //   minify: 'esbuild',
    //   rollupOptions: {
    //     output: {
    //       sourcemap: false,
    //       chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
    //       entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
    //       assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件如：字体、图片、样式等
    //       // 创建自定义的公共 chunk，将静态资源分拆打包：将 node_modules 中的代码单独打包成一个 JS 文件
    //       manualChunks: (id: string) => {
    //         if (id.includes('node_modules')) {
    //           return 'vendor'
    //         }
    //       }
    //     }
    //   },
    //   terserOptions: {
    //     // 生产环境时移除console
    //     compress: {
    //       drop_console: true,
    //       drop_debugger: true
    //     }
    //   }
    // }
  }
})
